<template>
  <div class="bg_wrapper">
    <!-- 背景层 -->
    <!-- <div class="bg_mask flex-hc flex-vc">
      <div class="triangle"></div>
      <div class="orthogon"></div>
    </div> -->
    <!-- 登录 -->
    <div class="login_wrapper flex-hc">
      <img
        src="../../assets/logo.png"
        class="logo_img"
      >
      <div class="login flex-v">
        <div class="user_phone public flex-h flex-hc flex-vc">
          <i class="icon iconfont icon-account-jdx fontsize32 icon_public"></i>
          <input
            class="flex1"
            type="tel"
            maxlength="11"
            placeholder="请输入手机号"
            v-model="phone"
          >
          <i
            class="icon iconfont icon-cancel-o cancleBtn"
            v-if="phone"
            @click="clearPhone"
          ></i>
        </div>
        <div class="verification_code public flex-h flex-hc flex-vc">
          <i class="icon iconfont icon-password-jdx fontsize32 icon_public"></i>
          <input
            class="flex1"
            type="tel"
            maxlength="6"
            placeholder="请输入短信验证码"
            v-model="verificationCode"
          >
          <i
            class="icon iconfont icon-cancel-o cancleBtn"
            v-if="verificationCode"
            @click="clearVerificationCode"
          ></i>
          <div
            class="verification_btn"
            @click="_getVerificationCode"
            :class="[isVerificationCodeBtn ? 'verification_btn_clicked' : 'verification_btn_unclick' ]"
          >{{isVerificationCodeBtn ? '重新发送'+countDownNum+'S' : '获取验证码'}}</div>
        </div>
      </div>
      <!-- 用户协议 -->
      <div class="agreement flex-h flex-hc flex-vc fontsize28">
        <input
          type="checkbox"
          v-model="isAgreement"
        >
        <span>已阅读并同意</span>
        <span
          @click="goToUserRule"
          class="baseColorNoAcitve"
        >《用户协议》</span>
      </div>
      <!-- 登录按钮 -->
      <div
        class="login_btn fontsize32"
        @click="_getLogin"
      >登 录</div>
    </div>
  </div>
</template>

<script>
import { getVerificationCode, Login } from '../../api/api'
import { verifyUserPhone, verifyVerificationCode, verifyAgreement } from '../../utils/verify'
import { wxLogin } from '../../utils/wxLogin'
import { getUserInfo } from 'vue-xiaobu-utils'

export default {
  components: {

  },
  data() {
    return {
      phone: '', // 手机号
      verificationCode: '', // 验证码
      isVerificationCodeBtn: false, // 验证码按钮点击状态
      countDownNum: 120, // 验证码倒计时
      isLoginBtn: false,
      isAgreement: ''
    }
  },
  beforeRouteEnter: (to, from, next) => {
    console.warn(parseInt(getUserInfo().IS_LOGIN) === 1)
    // 判断是否需要登录
    if (parseInt(getUserInfo().IS_LOGIN) === 1) {
      next({ name: 'buyIndex' })
    } else {
      next()
    }
  },
  watch: {
    isAgreement(val) {
      this.isAgreement = val
    }
  },
  methods: {
    // 点击按钮获取验证码
    _getVerificationCode() {
      verifyUserPhone(this.phone).then(res => {
        if (!this.isVerificationCodeBtn) {
          getVerificationCode(this.phone).then(res => {
            this.isVerificationCodeBtn = true
            this.countDownTime()
          })
        }
      }).catch(err => {
        this.$toastMsg(err)
      })
    },
    // 验证码倒计时
    countDownTime() {
      if (this.countDownNum === 0) {
        this.isVerificationCodeBtn = false
        this.countDownNum = 120
      } else {
        --this.countDownNum
        setTimeout(() => {
          this.countDownTime()
        }, 1000)
      }
    },
    // 登录按钮点击
    _getLogin() {
      Promise.all([verifyUserPhone(this.phone), verifyVerificationCode(this.verificationCode), verifyAgreement(this.isAgreement)]).then(res => {
        if (!this.isLoginBtn) {
          Login(this.phone, this.verificationCode).then(res => {
            // bindOpenID().then(res => {
            //   this.$router.push('/buy/index')
            // })
            this.$router.push('/buy/index')
          })
        }
      }).catch(err => {
        this.$toastMsg(err)
      })
    },
    goToUserRule() {
      this.$router.push({ name: 'userRule' })
    },
    clearPhone() { // 点击按钮清空手机号
      this.phone = ''
    },
    clearVerificationCode() {
      this.verificationCode = ''
    },
    iosInputBack() { // 解决ios微信里键盘收起后页面无法回退的问题
      let ua = navigator.userAgent
      if (/MicroMessenger/i.test(ua) && /(iPhone|iPad|iPod|iOS)/i.test(ua)) {
        let inputArr = document.querySelectorAll('input')
        inputArr.forEach(item => {
          if (!item.addMixinBlur) {
            item.addMixinBlur = true
            item.addEventListener('blur', () => {
              // document.body.scrollTop = document.body.scrollTop
              setTimeout(() => {
                window.scrollTo(0, 0) // 页面滚动到顶部
              }, 100)
            })
          }
        })
      }
    }
  },
  mounted() {
    wxLogin()
    this.iosInputBack()
  }
}
</script>

<style scoped>
.bg_wrapper {
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: url('../../assets/login-bc.png') no-repeat;
  background-size: 100% 60%;
}
.bg_mask {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    234deg,
    rgba(0, 176, 255, 1) 0%,
    rgba(0, 120, 255, 1) 100%
  );
}
/* 三角形 */
.triangle {
  width: 100%;
  height: 38%;
  border-color: #f2f5f6 transparent; /*上下颜色 左右颜色*/
  border-left: 750px solid transparent; /*50px为左顶点到上顶点的水平距离*/
  border-right: 0px solid transparent; /*100px为右顶点到上顶点的水平距离*/
  border-bottom: 350px solid #f2f5f6; /*200px为底线到上顶点的水平距离*/
  border-top: 0 solid transparent;
  border-style: solid;
}
/* 三角形下方的矩形 */
.orthogon {
  width: 100%;
  height: 50%;
  background-color: #f2f5f6;
}
/* 登录部分 */
.login_wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 686px;
  height: 1038px;
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  box-sizing: border-box;
  padding: 33px;
}
/* LOGO图片 */
.logo_img {
  width: 200px;
  height: 200px;
  background: rgba(0, 120, 255, 1);
  border-radius: 32px;
  margin: 80px 210px 22px 210px;
  overflow: hidden;
}
/* 输入信息部分 */
.login {
  width: 620px;
  height: 280px;
  box-sizing: border-box;
}
/* 输入框公共样式 */
.public {
  margin-top: 32px;
  padding: 32px 0;
  box-sizing: border-box;
  border-bottom: 2px solid #cccccc;
}
.public > input {
  min-width: 256px;
  background: none;
  outline: none;
  border: none;
  font-size: 32px;
  font-weight: 400;
  color: #000000;
}
.icon_public {
  color: #0078ff;
  font-size: 48px;
  margin-right: 30px;
}
/* 验证码按钮 */
.verification_btn {
  min-width: 180px;
  height: 52px;
  line-height: 52px;
  font-size: 32px;
  text-align: center;
  color: #ffffff;
  border-radius: 8px;
  padding: 0 5px;
}
.verification_btn_unclick {
  background: #0078ff;
}
.verification_btn_clicked {
  background: #999999;
}
/* 删除按钮 */
.cancleBtn {
  color: #cccccc;
  margin-right: 32px;
}
/* 用户协议 */
.agreement {
  margin-top: 106px;
}
.agreement > input {
  margin-right: 16px;
}
.agreement input[type='checkbox'] {
  background: url('../../assets/CheckBox.png') no-repeat center;
  background-size: 32px;
  width: 32px;
  height: 32px;
}
.agreement input[type='checkbox']:checked {
  background: url('../../assets/CheckedBox.png') no-repeat center;
  background-size: 32px;
  width: 32px;
  height: 32px;
}
.login_btn {
  width: 600px;
  height: 72px;
  border-radius: 55px;
  background: #0078ff;
  margin-top: 32px;
  text-align: center;
  line-height: 72px;
  color: #ffffff;
}
</style>
